(function( $ ) {
  $.fn.flip = function(options) {

      //options
      var settings = $.extend( {
        'duration'         : 1000,
        'next'           : 'next',
        'skew'           : 3,
        'backgroundCss' : "background:url('img/box_black.png') no-repeat scroll 14px 18px transparent"
      }, options);

      //init
      var count = 0;
      var dur = Math.floor(settings.duration/2);
      var skew = settings.skew;

      var id = $(this).attr("id");
      $(this).children().each(function(index){
          $(this).addClass("flip_pane_"+index);
          $(this).hide();
         count++;
      });
      $("#"+id+" > .flip_pane_0").show();
      var current = 0;

      //background
      $(this).attr('style',$(this).attr('style')+";"+settings.backgroundCss);

      //control
      var next = $("<a></a>").html(settings.next).click(function(){flip()});
      next.addClass("flip_control");
      next.css('cursor','pointer');
      $(this).prepend(next);

      function flip() {
          next.animate({opacity:0.3},dur);
          $("#"+id + " > .flip_pane_"+current).animate({opacity:0.3},dur);
          $("#"+id).animate({scaleX: '0.03',skewY: -1*skew},dur,function(){
            $("#"+id + " > .flip_pane_"+current).hide();
            current = Math.min(current+1);
            if(current==count)current=0;
            $("#"+id + " > .flip_pane_"+current).show();
            $("#"+id).css("skewY", skew);
            $("#"+id).css("scaleX", 0.03);
            $("#"+id + " > .flip_pane_"+current).css("opacity", 0.3);
            next.animate({opacity:1},dur);
            $("#"+id + " > .flip_pane_"+current).animate({opacity:1},dur);
            $("#"+id).animate({scaleX: '1',skewY: '0'},dur);
        });
      }

      var controler = {
         flip : flip,
         setDuration : function(value) {
             dur = Math.floor(value/2);
         },
         setSkew : function(value) {
             skew = value;
         }
      }
      return controler;
  };
})( jQuery );